<template>
  <div class="toOrder">
    <el-form v-loading="toLoad" :model="toModel" :rules="toRules" ref="toForm" label-width="125px" size="small">
      <el-form-item label="订单编号：" prop="orderNo">
        <el-input v-model="toModel.orderNo" placeholder="请填写订单编号" readonly disabled clearable :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-form-item label="商品总价：" prop="totalPrice">
        <el-input-number type="text" v-model="toModel.totalPrice" :precision="2" :step="0.1" :min="0" :max="999999" size="small" disabled placeholder="请填写商品总价"></el-input-number>
      </el-form-item>
      <el-form-item label="原始邮费：" prop="totalPostage">
        <el-input-number type="text" v-model="toModel.totalPostage" :precision="2" :step="0.1" :min="0" :max="999999" size="small" disabled placeholder="请填写原始邮费"></el-input-number>
      </el-form-item>
      <el-form-item label="实际支付邮费：" prop="payPostage" v-if="toModel.payPostage">
        <el-input-number type="text" v-model="toModel.payPostage" :precision="2" :step="0.1" :min="0" :max="999999" size="small" disabled placeholder="请填写实际支付邮费"></el-input-number>
      </el-form-item>
      <el-form-item label="实际支付金额：" prop="payPrice">
        <el-input-number type="text" v-model="toModel.payPrice" :precision="2" :step="0.1" :min="0" :max="999999" size="small" placeholder="请填写实际支付金额"></el-input-number>
      </el-form-item>
      <el-form-item label="赠送积分：" prop="gainIntegral" v-if="toModel.gainIntegral">
        <el-input-number type="text" v-model="toModel.gainIntegral" :precision="2" :step="1" :min="0" :max="999999" size="small" placeholder="请填写赠送积分"></el-input-number>
      </el-form-item>
      <el-button @click="toForm('toForm')" style="width: 100%;" type="primary" size="small">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import {
  orderDetailApi as getOrderInfo,
  putOrderPayPriceApi
} from '@/api/order';

export default {
  name: 'Index',
  props: {
    id: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      toLoad: true,
      toModel: {
        orderNo: '',
        totalPrice: 0,
        totalPostage: 0,
        payPostage: 0,
        payPrice: 0,
        gainIntegral: 0
      },
      toRules: {
        orderNo: [
          { required: true, message: '请填写订单编号', trigger: 'change' }
        ],
        totalPrice: [
          { required: true, message: '请填写商品总价', trigger: 'change' }
        ],
        totalPostage: [
          { required: true, message: '请填写原始邮费', trigger: 'change' }
        ],
        payPostage: [
          { required: true, message: '请填写实际支付邮费', trigger: 'change' }
        ],
        payPrice: [
          { required: true, message: '请填写实际支付金额', trigger: 'change' }
        ],
        gainIntegral: [
          { required: true, message: '请填写赠送积分', trigger: 'change' }
        ]
      }
    };
  },
  created() {
    this.toInfo();
  },
  methods: {
    /**
     * 查询订单信息
     */
    toInfo() {
      getOrderInfo(this.id).then(res => {
        this.$set(this, 'toModel', {
          orderNo: res.orderNo,
          totalPrice: res.totalPrice,
          totalPostage: res.totalPostage,
          payPrice: res.payPrice
        });
        this.$set(this, 'toLoad', false);
      }).catch((err) => {
        this.$set(this, 'toLoad', false);
      });
    },
    toForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          putOrderPayPriceApi({
            id: this.id,
            payPrice: this.toModel.payPrice
          }).then(res => {
            this.$message.success('提交成功!');
            this.$emit('reload');
            this.$emit('close');
          });
        } else return false;
      });
    }
  }
}
</script>

<style scoped>

</style>
